@import "../../styles/vars.scss";

.card {
  box-shadow: 22px 4px 4px 0px rgba(0, 0, 0, 0.25), -22px 4px 4px 0px rgba(0, 0, 0, 0.25);
  max-width: 720px;
  width: 100%;
  height: 800px;
  padding: 25px;
  border-radius: 40px;
  background: #fff;
  &:hover {
    .name {
      text-decoration: underline;
    }
    .content {
      text-decoration: underline;
    }
    .publication {
      text-decoration: underline;
    }
  }
  @media screen and (max-width: $mobileAlb) {
    height: 650px;
    padding: 15px;
  }

  @media screen and (max-width: $mobile) {
    height: 550px;
  }
  .cardLink {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    @media screen and (max-width: $mobileAlb) {
      gap: 10px;
    }
    .photo {
      width: 100%;
      height: 419.5px;
      border-radius: 15px;
      @media screen and (max-width: $mobileAlb) {
        height: 329.5px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
      }
    }
    .name {
      color: black;
      font-size: 48px;
      font-weight: 500;
      text-align: center;
      @media screen and (max-width: $mobileAlb) {
        font-size: 32px;
      }
      @media screen and (max-width: $mobile) {
        font-size: 20px;
      }
    }
    .content {
      color: black;
      font-size: 26px;
      font-style: normal;
      font-weight: 400;
      -ms-text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      overflow: hidden;
      -ms-line-clamp: 5;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      display: -webkit-box;
      display: box;
      word-wrap: break-word;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      @media screen and (max-width: $mobileAlb) {
        font-size: 15px;
        -ms-line-clamp: 7;
        -webkit-line-clamp: 7;
        line-clamp: 7;
      }
    }
  }
}

.publication {
  color: black;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  -ms-line-clamp: 16;
  -webkit-line-clamp: 16;
  line-clamp: 16;
  display: -webkit-box;
  display: box;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  @media screen and (max-width: $mobileAlb) {
    font-size: 15px;
    -ms-line-clamp: 25;
    -webkit-line-clamp: 25;
    line-clamp: 25;
  }
  @media screen and (max-width: $mobile) {
    -ms-line-clamp: 18;
    -webkit-line-clamp: 18;
    line-clamp: 18;
  }
}
